<template>
  <div ref="divRef" class="com-full echarts-box"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { watch, ref, onMounted } from "vue";
const props = defineProps({
  options: {
    type: Object,
    default: () => { },
  },
});
const divRef = ref(null);
onMounted(() => {
  watch(
    () => props.options,
    () => {
      if (divRef.value) {
        var Echarts = echarts.init(divRef.value);
        const option = {
          tooltip: {
            trigger: 'item'
          },
          ...props.options
        }
        Echarts.setOption(option);
      }
    },
    { immediate: true }
  );
});
</script>

<style scoped lang="scss">
.echarts-box {
  pointer-events: all;
}
</style>